<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">日期</div>
                <el-date-picker v-model="search.time_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="medium" style="width:250px" :value-format="'YYYY-MM-DD'" />
                <div class="search-input">部门</div>
                <el-cascader v-model="search.dept_id" :options="depts" :props="deptsProps" clearable></el-cascader>
                <div class="search-input">岗位</div>
                <el-select v-model="search.jobs_id" filterable placeholder="请选择岗位" clearable>
                    <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="部门" prop="dept" align="center"></el-table-column>
                <el-table-column label="岗位" prop="jobs" align="center"></el-table-column>
                <el-table-column label="工号" align="center">
                    <template #default="{row}">
                        <div>{{row.staff_id}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="staff_name" align="center"></el-table-column>
                <el-table-column label="条码编号" align="center">
                    <template #default="{row}">
                        <div>{{row.barcode}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="批次号" prop="batch_number" align="center"></el-table-column>
                <el-table-column label="工序名" prop="process_title" align="center">
                     <!-- column-key="filterUserName" :filters="proList" -->
                    <template #default="{row}">
                        <div>{{row.process_title + ' - ' + row.two_process_title}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="码数" prop="goods_size" align="center"></el-table-column>
                <el-table-column label="数量" prop="total_num" align="center"></el-table-column>
                <el-table-column label="录入时间" prop="create_time" align="center" width="150"></el-table-column>
                <el-table-column label="单价" align="center">
                    <template #default="{row}">
                        <div>{{row.price}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="work_unit" align="center"></el-table-column>
                <el-table-column label="金额" prop="total_amount" align="center"></el-table-column>
                <el-table-column label="数据来源" prop="source" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="gpAbnormal(scope.row, scope.$index)" v-auth="'abnormal.auditing'">审核</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <shen-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></shen-save>
</template>
<script>
import shenSave from './shenSave.vue';

export default {
  components: { shenSave },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false
            },
			group: [],
			apiObj: this.$API.produce.workshop.scanRecord.list,
            query:{
                is_abnormal:1,
                source:1,
            },
			selection: [],
			search: {
				time_range: [],
                jobs_id:null,
			},
            jobList:[],
            isSaveing: false,
            depts: [],
			deptsProps: {
				value: "id",
				checkStrictly: true
			},
            proList:[],
		}
	},
	mounted() {
        this.getJobs()
        this.getDept()
        this.getProcess()
        this.getMonth()
    },
	methods: {
        // 获取当前月份
        getMonth(){
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.search.time_range[0] = formattedFirstDay
            this.search.time_range[1] = formattedLastDay
        },
        // 去审核
        gpAbnormal(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
        //搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        //本地更新数据
        handleSuccess(data, mode) {
            if (mode == 'add') {
                this.$refs.table.refresh()
            } else if (mode == 'edit') {
                this.$refs.table.refresh()
            } else if (mode == 'set') {
                this.$refs.table.refresh()
            }
        },
        // 控制单选
        selectAll() {
            this.$message.error("请选择一条数据！")
            this.$refs.table.clearSelection()
        },
        selectionChanges(selection) {
            if(selection.length > 1){
                const del_row = selection.shift()
                this.$refs.table.toggleRowSelection(del_row,false) //设置这一行取消选中
            }
			this.selection = selection;
		},
        handleKeyDown() {
            this.upsearch()
        },
        // 获取岗位
        async getJobs(){
            var res = await this.$API.all.dept.get();
            this.jobList = res.data;
        },
        // 获取部门
        async getDept() {
			var res = await this.$API.system.dept.list.get();
			this.depts = res.data;
		},
        // 获取工序
        async getProcess() {
			var res = await this.$API.all.process.get({pid:'4,8'});
            let array = []
            res.data.map(item=>{
                array.push({
                    text:item.title,
                    value:item.id
                })
            })
            this.proList = array
		},
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>